<template>
  <div class="content">
    <div class="main">
      <HelloWorld></HelloWorld>
      <TheWelcome></TheWelcome>
      <mainIndex></mainIndex>
      <Template :show="show" title="今日推荐" :list="list" />
      <img class="banner" src="../../assets/image/23.webp" alt="" />
      <Template title="邀请函·高端会议必备" :list="cardlist" />
      <Template title="旦愿美好·岁月如新" :list="yearlist" />
      <Template title="平安喜乐·圣诞快乐" :list="peacefullist" />
      <img class="banner" src="../../assets/image/24.webp" alt="" />
      <div class="foot">
        <footIndex />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Template from '@/components/Template.vue'
import footIndex from '../../components/footIndex.vue'
import { get_cardList, get_card, get_years, get_peaceful } from '../../api'
import { onMounted, ref } from 'vue'
import HelloWorld from '../../components/HelloWorld.vue'
import TheWelcome from '@/components/TheWelcome.vue'
import mainIndex from '../../components/mainIndex.vue'

const show = true
const list: any = ref([])
const cardlist: any = ref([])
const yearlist: any = ref([])
const peacefullist: any = ref([])

onMounted(() => {
  const getList = () => {
    get_cardList().then((res: any) => {
      list.value = res.data.user
    })
    get_card().then((res: any) => {
      cardlist.value = res.data.user
    })
    get_years().then((res: any) => {
      yearlist.value = res.data.user
    })
    get_peaceful().then((res: any) => {
      peacefullist.value = res.data.user
    })
  }
  getList()
})

// const login = () => {
//   const username = user.value
//   const password = pwd.value
//   _login({ username, password }).then((res: any) => {
//     console.log(res);\
//   })
// }
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: auto;

  .main {
    width: 95%;
    min-height: 1000px;
    margin: 0 auto;

    .banner {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      margin-top: 20px;
    }

    .foot {
      width: 100%;
      height: 380px;
      margin-top: 60px;
    }
  }
}
</style>
